<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 800px;
            margin: 100px auto;
            /* outline: 1px solid red; */
            transform-style: preserve-3d;
            /* background-color: rgba(189, 230, 195, 0.178); */
            position: relative;
            transform: rotateX(-30deg) rotateY(60deg);
            /* perspective:200px; */
            /* perspective-origin: 0 0; */
        }
        .face{
            width: 400px;
            height: 400px;
            background-color: rgb(192, 118, 118);
            position: absolute;
            left: 200px;
            top: 200px;
            text-align: center;
            line-height: 400px;
            font-size: 4em;
            text-transform: uppercase;
            color: white;
            /* backface-visibility:hidden; */
            transition: all 1s;
            opacity: 0;
        }
        .front{ 
            background-color: rgba(243, 112, 112, 0.781);
        }
        .back{
            background-color: rgba(143, 243, 112, 0.685);
            transition-delay: 1s;
        }
        .left{
           
            transition-delay: 2s;
            background-color: rgba(24, 211, 170, 0.685);
        }
        .right{
            
            background-color: rgba(53, 74, 192, 0.685);
            transition-delay: 3s;
        }
        .top{
           
            background-color: rgba(192, 53, 180, 0.685);
            transition-delay: 4s;
        }
        .bottom{
            
            background-color: rgba(199, 218, 34, 0.685);
            transition-delay: 5s;
        }
        .btn{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(68, 68, 68);
            font-size: 1.5em;
            line-height: 100px;
            text-align: center;
            color: white;
            margin: 0 auto;
            text-transform: uppercase;
            cursor: pointer;
        }
        .btn:hover{
            background-color: rgb(167, 167, 167);
            transition: 0.3s;
        }
        .btn:hover~.front{
            transform:translateZ(200px);
            opacity: 1;
        }
        .btn:hover~.back{
            transform: rotateY(180deg) translateZ(200px) ;
            opacity: 1;
        }
        .btn:hover~.left{
            transform: rotateY(90deg) translateZ(200px);
            opacity: 1;
        }
        .btn:hover~.right{
            transform: rotateY(-90deg) translateZ(200px);
            opacity: 1;
        }
        .btn:hover~.top{
            transform: rotateX(90deg) translateZ(200px);
            opacity: 1;
        }
        .btn:hover~.bottom{
            transform: rotateX(-90deg) translateZ(200px);
            opacity: 1;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="btn">hover</div>
        <div class="face front">front</div>
        <div class="face back">back</div>
        <div class="face left">left</div>
        <div class="face right">right</div>
        <div class="face top">top</div>
        <div class="face bottom">bottom</div>
    </div>
</body>
</html>